<template>
    <div>
        <header class="login">
        <a class="iconfont icon-fanhui" @click="back"></a><h1>登录</h1>
        </header>
        <div class="logined">
            <div class="users">
                <i class="iconfont icon-yonghu"></i><input type="text" placeholder="手机号/用户名"  v-model="username" @input="judge"/>
            </div>
            <div class="password" >
                <i class="iconfont icon-mima"></i><input type="password" placeholder="密码" v-model="password"
                @input="judge"/>
            </div>
            </div>
        <div class="backPassword">
              <a @click="resetTo">忘记密码？</a>
         </div>
         <div class="logins">
             <van-button  type="primary" size="large" round :color='btnColor' @click="isLogin">登录</van-button>
         </div>
          <div class="backRegister">
           <span>没有账号？</span><a @click="registerTo">快速注册</a>
          </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Button, Toast } from 'vant'
import { findTel } from '@/utils/api.js'
Vue.use(Button).use(Toast)
export default {
  data () {
    return {
      password: '',
      username: '',
      btnColor: '#c3c3c3'
    }
  },
  methods: {
    resetTo () {
      this.$router.push('/resetPassword')
    },
    back () {
      this.$router.push('/home')
    },
    registerTo () {
      this.$router.push('/register2')
    },
    isLogin () {
      let obj = {}
      if (this.password !== '' && this.username !== '') {
        obj.password = this.password
        if (this.username * 1 === this.username - 0) {
          obj.tel = this.username
        } else {
          obj.username = this.username
        }
        window.console.log(obj)
        findTel(obj).then(res => {
          if (res.code === '1010') {
            localStorage.setItem('token', res.token)
            localStorage.setItem('userid', res.data[0].userid)
            this.$router.replace('/home')
            Toast('登录成功')
          } else if (res.code === '1111') {
            Toast('账号或密码错误')
          } else {
            Toast('未注册的用户或手机号')
          }
        })
      } else {
        Toast('账号或者密码错误')
      }
    },
    judge () {
      if (this.password !== '' && this.username !== '') {
        this.btnColor = '#36bc7c'
      } else {
        this.btnColor = '#c3c3c3'
      }
    }
  },
  created () {
    this.loginStore().then(res => {
      res.code === 200 ? this.$router.replace('/home') : this.$router.replace('/login')
    })
  }
}
</script>

<style lang="scss">
.login{
     background: #fff;
     height:0.44rem;
     display: flex;
     align-items: center;
     border-bottom: 0.01rem solid #f2f2f2;
     h1{
         font-size:0.18rem;
         display: inline-block;
         width: 100%;
         text-align: center;
         font-family: 'Microsoft Yahei';
         color:#030303;
         font-weight: 400;
         padding-right:0.6rem;
     }
     a{
         display: inline-block;
         font-size:0.18rem;
         width:0.4rem;
         height:0.44rem;
         margin-right: .2rem;
         color: #817f7f;
         display:flex;
         align-items: center;
         justify-content: center;
         font-weight: 500;
     }
 }
 .logined{
      margin-top:1rem;
      background: #fff;
     input{
         width:3.07rem;
         border:0;
         text-indent: 0.1rem;
         color: #817f7f
     }
  .users{
         height: 0.45rem;
         display: flex;
         align-items: center;
         border-bottom: 0.01rem solid #f2f2f2;
         width: 3.25rem;
         margin: 0 auto;
     }
     .password{
         height: 0.45rem;
         display: flex;
         align-items: center;
         border-bottom: 0.01rem solid #f2f2f2;
         width: 3.25rem;
          margin: 0 auto;
     }
 }
 .backPassword{
     height: 0.34rem;
     width:3.25rem;
     display: flex;
     justify-content: flex-end;
      padding: 0.05rem;
      margin: 0 auto;
     a{
         display: inline-block;
         line-height: 0.34rem;
           font-size: 0.1rem;
           color: #989898;
     }
 }
 .logins{
     width:3.25rem;
     margin: 0 auto;
 }
 .backRegister{
     display: flex;
     justify-content: center;
     width:3.25rem;
     margin: 0.2rem auto;
     font-size:0.12rem;
     align-items: center;
     span{
         color:#989898;
     }
     a{
         color: #656565;
         display: inline-block;
         border: 0.01rem solid #656565;
         border-radius: 0.05rem;
         padding: 0.03rem 0.1rem;
     }
 }
</style>
